PDF.js使用总结 |
您所在的位置：网站首页 › pdfjs 官网 › PDF.js使用总结 |
PDF.js使用总结
|
在这次的项目中用到了pdf文件的预览功能，选择了pdf.js去预览pdf文件，实现滑动展示所有的pdf Pdf.js有两种使用方式 通过 npm 下载 直接下载 pdf.js 库，当作静态资源使用最开始我采取的是把pdf.js当作静态资源使用，使用方法如下： 官网下载后解压项目得到 pdf.js 放到项目文件夹 /public/static/ 下 直接将 web/viewer.html 后面的 file 跟上自己自己的 pdf 文件即可 contentUrl.current = content.includes("pdf") ? `/static/pdfjs-3.1.81-dist/web/viewer.html?file=${content}` : content;使用静态资源时，如果需要更改他的默认样式需要自己手动改源代码 同时可能我们遇到了跨域问题，我们需要在源码中的判断跨域代码注释掉 使用静态资源的问题是在移动端不能手势放大缩小，需要我们自己编写代码然后修改源代码强制放大缩小 这种方式不细讲，网上很多使用方式都是通过使用静态资源，可以自行去查看，这里只讲一个大概。 npm下载，通过import使用方法如下： npm install pdfjs-dist const contentRef = useRef(null); useEffect(() => { //content就是 iframe 请求的url，这里是因为我的项目里面需要判断下他url是否涵盖了pdf //如果涵盖了才使用pdf.js content.includes('pdf') //重点是 loadPdf() 这个函数，就是我们使用 pdf.js 的函数 ? loadPdf(contentRef.current, content, loadingRef.current) : null; }, [content]); {content.includes('pdf') ? null : } import * as pdf from 'pdfjs-dist'; import pdfWorker from 'pdfjs-dist/build/pdf.worker.js?url'; pdf.GlobalWorkerOptions.workerSrc = pdfWorker; /** * @desc 使用pdf.js加载pdf * @param contentDom * @param url */ export const loadPdf = async ( contentDom: HTMLDivElement | null, url: string, loadingDom: HTMLDivElement | null ) => { //得到请求的 pdf 文件 const loadingTask = pdf.getDocument({ url: url, disableRange: true }); //loading效果,下载pdf过程中展示loading loadingTask.onProgress = () => { if (loadingDom) { loadingDom.style.display = 'block'; } }; loadingTask.promise.then((pdfDoc) => { //下载完成时，loading消失 if (loadingDom) { loadingDom.style.display = 'none'; } //得到 pdf 总页数 const totalPages = pdfDoc.numPages; for (let i = 1; i { const canvas = document.createElement('canvas'); canvas.setAttribute('id', `the-canvas${i}`); const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; const dpr = window.devicePixelRatio || 1; const scaledViewport = page.getViewport({ scale: 1 }); canvas.height = Math.floor(scaledViewport.height * dpr); canvas.width = Math.floor(scaledViewport.width * dpr); canvas.style.width = document.body.clientWidth + 'px'; canvas.style.height = document.body.clientWidth / (canvas.width / canvas.height) + 'px'; const transform = dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined; const renderContext = { canvasContext: ctx, viewport: scaledViewport, transform: transform }; page.render(renderContext); contentDom?.appendChild(canvas); }); } }); };上面的代码展示了我使用pdf.js的整个使用过程，主要思路是先获取到pdf文件，然后得到总页数后通过生成响应页数的canvas，然后再渲染到页面上展示pdf 这里需要注意的是scaledViewport.height得到的是你的pdf文件本身的宽高，我们需要通过这个宽高进行适配我们自己的屏幕，同时需要保证他的清晰度，所以我们需要保证canvas两个宽高的尺寸是一致的。 canvas 本身有两个宽高，标签的 width 和 height 是绘画区域实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度,如果 canvas 标签中没有定义 width 和 height 时,默认会给宽 300 高 150,所以就出现了拉伸的效果,不想用默认的宽高的话,尽量在标签中写上宽高的属性。 所以，如上面的代码一样，宽度就是整个屏幕的宽度，但是每个pdf页面的高度，需要保证和canvas.width/canvas.height的尺寸一致 canvas.style.height = document.body.clientWidth / (canvas.width / canvas.height) + 'px';这样就能展示pdf文件了 这里又存在一个问题，文件过大，而pdf.js的渲染原理是需要将整个pdf文件下载下来后，再进行展示，这就导致了白屏的时间过长，用户体验感不好，然后我们就想到了分片下载 我们需要在 getDocument()这个api上增加一些配置 const loadingTask = pdf.getDocument({ url: url, //disableRange: true, rangeChunkSize: 65536 * 16, disableAutoFetch: true });分片下载还有一个很重要的点，就是需要判断下你访问的pdf是否支持分片下载,使用了分片下载的请求是后续会通过你的分片大小发送206请求 HTTP206状态码代表的意思是 请求已成功处理，但仅返回了部分内容，即 HTTP 206 Partial Content 响应状态。 HTTP 206 (Http Status Code 206) 状态是HTTP协议的一种响应码，是我们请求访问网站时，服务器端返回的2xx 成功状态系列响应码之一。 查看是否支持分片下载 需要有这个响应头才是支持分片下载 accept-range:bytes 但后面我们遇到一个问题：我们的pdf链接存在这个响应头，但却不支持分片下载，后面通过对比发现是这个响应头 access-control-expose-headers 的问题 响应标头 Access-Control-Expose-Headers 允许服务器指示哪些响应标头应该对浏览器中运行的脚本可用，以响应跨源请求。 我们最开始这个响应头里面的内容没有Access-Control-Expose-Headers，意味着就算存在 accept-range 这个响应头，浏览器也不可用，所以在后面我们添加上这个响应头的内容后就可以使用分片下载了。 API(记录一下，防止忘记）这个api来源于掘金的某位大佬 属性说明类型默认值属性说明类型默认值worker用于加载和解析 PDF 数据的工作器PDFWorker-withCredentials指示是否应使用 cookie 或授权标头等凭据发出跨站点访问控制请求。Booleanfalseverbosity控制日志记录级别；应该使用 VerbosityLevel 中的常量Number-useWorkerFetch在读取 CMap 和标准字体文件时启用在工作线程中使用 Fetch API。当为“true”时，会忽略“CMapReaderFactory”和“StandardFontDataFactory”选项。 Web 环境中的默认值为 true，Node.js 中的默认值为 falseBoolean-useSystemFonts是否使用系统字体BooleanfalseurlPDF的url地址String URLstopAtErrors拒绝某些方法，例如getOperatorList、getTextContent 和 RenderTask，当相关的 PDF 数据无法成功解析时，而不是尝试恢复任何可能的数据BooleanfalsestandardFontDataUrl标准字体文件所在的地址。包括尾部斜杠String-StandardFontDataFactory读取标准字体文件时将使用的工厂。提供自定义工厂对于没有 Fetch API 或 XMLHttpRequest 支持的环境很有用，例如 Node.jsObject{DOMStandardFontDataFactory}rangeChunkSize指定每个范围请求获取的最大字节数NumberDEFAULT_RANGE_CHUNK_SIZErange允许使用自定义范围PDFDataRangeTransport-pdfBug启用用于调试 PDF.js 的特殊钩子（请参阅web / debugger.js）Objectfalsepassword用于解密受密码保护的 PDFString-ownerDocument指定一个显式的文档上下文来创建元素并将资源（例如字体）加载到其中HTMLDocument-maxImageSize总像素中允许的最大图像大小，即宽 * 高。不会呈现高于此值的图像。使用 -1 表示没有限制，这也是默认值Number-lengthPDF 文件长度。它用于进度报告和范围请求操作Number-isEvalSupported确定我们是否可以将字符串评估为 JavaScript。主要用于提高字体渲染的性能，以及解析 PDF 函数时BooleantrueinitialData带有第一部分或全部 pdf 数据的类型化数组。由扩展使用，因为在切换到范围请求之前已经加载了一些数据。TypedArray-httpHeaders基本身份验证请求头Object-fontExtraProperties从工作线程导出解析的字体数据时，包括在渲染 PDF 文档期间未使用的其他属性,这对于调试目的（和向后兼容性）可能很有用，但请注意，它会导致内存使用量增加BooleanfalseenableXfa渲染 Xfa 表格BooleanfalsedocBaseUrl文档的基本 URL，在尝试恢复注释和大纲项的有效绝对 URL 时使用，（错误地）仅指定了相对 URLstring-disableStream禁用 PDF 文件数据的流式传输。默认情况下，PDF.js 尝试分块加载 PDF 文件ObjectfalsedisableRange禁用 PDF 文件的范围请求加载。启用后，如果服务器支持部分内容请求，则 PDF 将分块获取BooleanfalsedisableFontFace默认情况下，字体会转换为 OpenType 字体并通过字体加载 API 或@font-face 规则加载。如果禁用，字体将使用内置字体渲染器渲染，该渲染器使用原始路径命令构建字形。Boolean-disableAutoFetch禁用预取 PDF 文件数据。启用范围请求后，即使不需要显示当前页面，PDF.js 也会自动继续获取更多数据Objectfalsedata二进制 PDF 数据。使用类型化数组 (Uint8Array) 来提高内存使用率。如果 PDF 数据是 BASE64 编码的，请先使用 atob() 将其转换为二进制字符串。TypedArray、Array、String-cMapUrl预定义 Adobe CMap 所在的 URL。包括尾部斜杠String-CMapReaderFactory自定义工厂对于没有 Fetch API 或 XMLHttpRequest 支持的环境很有用，例如 Node.jsObject{DOMCMapReaderFactory}cMapPacked指定 Adobe CMap 是否是二进制打包Boolean-最后，发现可能是这个库的问题还是什么，目前不太清楚，他总是从13M以上才开始快速渲染，而我们当时的文件大小差不多也是13M，所以采用了分片下载后，还是存在一段比较长的白屏时间，所以最后还是选用了将pdf转成图片再显示的形式。 |
【本文地址】
今日新闻 |
推荐新闻 |